<template>
  <div class="main-con flex1 vbox">
    <div class="search-con">
      <el-form :model="searchParam" :inline="true" label-width="105px">
        <el-form-item label prop="commodityCode">
          <el-input
            v-model.trim="searchParam.commodityCode"
            @keyup.enter.native="search"
            placeholder="输入客户编码查询"
          ></el-input>
        </el-form-item>
        <el-form-item label prop="afterCode">
          <el-input
            v-model.trim="searchParam.afterCode"
            @keyup.enter.native="search"
            placeholder="输入客户名称查询"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="vbox flex1">
      <div class="toolbar">
        <el-button type="primary" v-auth="'add'" icon="el-icon-plus" @click="addConsumer">添加客户</el-button>
      </div>
      <div class="vbox flex1">
        <base-table
          class="consumerTable"
          ref="consumerTable"
          url="consumer/getPage"
          code="htk-admin"
          :selection="false"
          :param="searchParam"
          :cls="columns"
          :option-btns="btns"
          @handlerOption="handlerOption"
        ></base-table>
      </div>
    </div>
    <el-dialog center title="新增/编辑客户" :visible.sync="showAddConsumer" width="40%">
      <el-form ref="consumerForm" :rules="rules" :model="consumer" label-width="95px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="上级客户" prop="parentId">
              <el-select
                clearable
                filterable
                style="width:100%"
                v-model="consumer.parentId"
                placeholder="请选择上级客户"
              >
                <el-option
                  v-for="item in parentConsumers"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户编码" prop="code">
              <el-input v-model.trim="consumer.code" placeholder="请输入客户编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model.trim="consumer.name" placeholder="请输入客户名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input v-model.trim="consumer.manager" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话">
              <el-input v-model.trim="consumer.phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系地址">
              <el-input type="textarea" v-model.trim="consumer.address" placeholder="请输入联系地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveConsumer">保存</el-button>
        <el-button @click="showAddConsumer = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAddConsumer: false,
      searchParam: {
        code: "",
        name: ""
      },
      columns: [
        { prop: "code", label: "客户编码" },
        { prop: "name", label: "客户名称" },
        { prop: "manager", label: "联系人" },
        { prop: "phone", label: "联系电话" },
        { prop: "address", label: "联系地址" }
      ],
      consumer: {
        code: "",
        name: "",
        manager: "",
        phone: "",
        address: "",
        parentId: ""
      },
      rules: {
        parentId: [
          {
            required: true,
            message: "请选择父级",
            trigger: ["change", "blur"]
          }
        ],
        code: [
          {
            required: true,
            message: "请输入客户编码",
            trigger: ["change", "blur"]
          }
        ],
        name: [
          {
            required: true,
            message: "请输入客户名称",
            trigger: ["change", "blur"]
          }
        ]
      },
      parentConsumers: [],
      btns: [
        { text: "编辑", code: "list_edit", type: "primary" },
        { text: "删除", code: "list_delete" }
      ]
    };
  },
  mounted() {
    this.defaultConsumer = JSON.parse(JSON.stringify(this.$data.consumer));
  },
  activated() {
    this.getConsumers();
  },
  methods: {
    addConsumer() {
      this.showAddConsumer = true;
      this.$nextTick(() => {
        this.$refs["consumerForm"].resetFields();
        this.consumer = Object.assign({}, this.defaultConsumer);
      });
    },
    search() {
      this.$refs["consumerTable"].initLoad();
    },
    handlerOption(code, row) {
      console.log(code);
      if (code == "list_delete") {
        this.deleteConsumer(row);
      } else if (code == "list_edit") {
        this.editConsumer(row);
      }
    },
    deleteConsumer(row) {
      let me = this;
      me.$confirm("确定删除选中行数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        me.$http.ajax({
          url: "consumer/delete/" + row.id,
          code: "htk-admin",
          success(res) {
            me.$message.success("删除成功");
            me.search();
          }
        });
      });
    },
    editConsumer(row) {
      this.showAddConsumer = true;
      this.$nextTick(() => {
        this.$refs["consumerForm"].resetFields();
        let temp = Object.assign({}, row);
        this.consumer = temp;
      });
    },
    saveConsumer() {
      let me = this;
      me.$refs["consumerForm"].validate(valid => {
        if (valid) {
          me.$http.ajax({
            url: "consumer/save",
            data: me.consumer,
            success: res => {
              me.$message.success("保存成功");
              me.search();
              me.showAddConsumer = false;
            }
          });
        }
      });
    },
    getConsumers() {
      let me = this;
      me.$http.ajax({
        url: "consumer/listChildren/" + me.$store.state.admin.orgId,
        success: res => {
          me.parentConsumers = res;
        }
      });
    }
  }
};
</script>

<style>
</style>
